<template>
<div style="text-align:left">
  <span class="photo-title">More photos (max 40)</span>
  <input type="file" name="floorPhotos" multiple="multiple" @change="getFile" style="display: none;">
  <div class="photos-box">
    <ul>
      <li v-for="(photoList,index) in floorPlanPhotoList" v-if="photoList.photoUrl">
        <img  :src="photoList.photoUrl" :data-src="index" />
        <a href="javascript:;" @click='delPhotoList(index)'>
            <span class="glyphicon glyphicon-remove">
              <i class="el-icon-delete"></i>
            </span>
        </a>
      </li>
        <li v-for="(image,index) in imageBlob">
          <img  :src="image" :data-src="index" />
          <a href="javascript:;" @click='delImage(index)'>
            <span class="glyphicon glyphicon-remove">
              <i class="el-icon-delete"></i>
            </span>
          </a>
        </li>
        <li>
          <a href="javascript:;" class="add-photos" @click='addPic'>
            <span class="glyphicon glyphicon-remove" >
              <i class="el-icon-plus"></i>
            </span>
          </a>
        </li>
    </ul>
  </div>
  <!--<el-button style="margin-left: 10px;" size="small" type="success" @click="uploadPhotos">Upload Photos</el-button>-->
</div>
</template>
<script>
  export default {
    name: 'uploadImagesFloor',
    props: [
      'floorPlanPhotoList'
    ],
    data () {
      return {
        imageList: [],
        imageBlob: [],
        blobsObj: []
      }
    },
    methods: {
      addPic (e) {
        e.preventDefault()
        document.getElementsByName('floorPhotos')[0].click()
        return false
      },
      // 获取图片文件
      getFile ($event) {
        let files = $event.target.files || $event.dataTransfer.files
        if (!files.length) return
        for (var i = 0; i < files.length; i++) {
          let f = files[i]
          if (!f.type.match('image.*')) {
            this.$message.error('The type of photos mustbe image!')
            continue
          }
          if (((this.imageList).length + (this.floorPlanPhotoList).length) >= 40) {
            this.$message.error('Upload up to forty pictures at most!')
            return false
          }
          let tip = false
          for (var j = 0; j < (this.imageList).length; j++) {
            if ((this.imageList)[j].name === f.name) {
              this.$message.error('Uploading pictures repeatedly!')
              tip = true
              break
            }
          }
          var reader = new FileReader()
          if (!tip) {
            this.imageList.push(f)
            reader.onload = ((theFile) => {
              return (e) => {
                this.setImageCompress(e, theFile.name)
                console.log(theFile)
              }
            })(f)
            reader.readAsDataURL(f)
          }
        }
      },
      // 压缩图片
      setImageCompress (e, f) {
        let img = new Image()
        img.src = e.target.result
        let canvas = document.createElement('canvas')
        let context = canvas.getContext('2d')
        let self = this
        img.onload = function () {
          // 图片原始尺寸
          let originWidth = this.width
          var originHeight = this.height
          // 最大尺寸限制
          let maxWidth = 400
          let maxHeight = 400
          // 目标尺寸
          let targetWidth = originWidth
          let targetHeight = originHeight
          // 图片尺寸超过400x400的限制
          if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
              // 更宽，按照宽度限定尺寸
              targetWidth = maxWidth
              targetHeight = Math.round(maxWidth * (originHeight / originWidth))
            } else {
              targetHeight = maxHeight
              targetWidth = Math.round(maxHeight * (originWidth / originHeight))
            }
          }
          // canvas对图片进行缩放
          canvas.width = targetWidth
          canvas.height = targetHeight
          // 清除画布
          context.clearRect(0, 0, targetWidth, targetHeight)
          // 图片压缩
          context.drawImage(img, 0, 0, targetWidth, targetHeight)
          // canvas转为blob并上传
          canvas.toBlob((blob) => {
            console.log(blob)
            self.blobsObj.push(blob)
            let srcUrl = URL.createObjectURL(blob)
            self.imageBlob.push(srcUrl)
            // console.log(self.blobsObj)
          }, 'image/png', 0.95)
        }
      },
      // 删除图片 photos
      delImage (e) {
        this.blobsObj.splice(e, 1)
        this.imageBlob.splice(e, 1)
        this.imageList.splice(e, 1)
        document.getElementsByName('floorPhotos')[0].value = ''
      },
      // 供父组件development调用
      removeAllImage () {
        this.imageList = []
        this.imageBlob = []
        this.blobsObj = []
        document.getElementsByName('photos')[0].value = ''
      },
      // 编辑修改页面--删除图片
      delPhotoList (e) {
        this.floorPlanPhotoList.splice(e, 1)
      }
    }
  }
</script>
<style>
.photos-box{
  width: 100%;
}
.photos-box ul{
  display: flex;
  flex-wrap: wrap;
  padding: 0 0;
}
.photos-box ul li{
  display: block;
  position: relative;
  width: 77px;
  height: 77px;
  margin-right: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  overflow: hidden;
}
.photos-box ul li a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.photos-box ul li:hover a{
  display: block;
}
.photos-box ul li img{
  width: 100%;
  height:100%;
  display: block;
}
.glyphicon{
width: 100%;
height: 100%;
color:#aeaeae;
display: inline-block;
text-align: center;
line-height: 77px;
background: rgba(0,0,0,.4);
border-radius: 5px;
}
.photos-box ul li a.add-photos{
  display: block;
  box-sizing: border-box;
  border:1px dashed #D8DCE5;
  border-radius:5px;
}
.photos-box ul li a.add-photos:hover{
  border:1px dashed #409EFF;
}
.add-photos .glyphicon{
  background: rgba(255,255,255,.7);
}
</style>
